<template>
  <div class='container'>
    <el-card>
      <!-- 关键字 -->
      <el-form class="form-box">
        <el-form-item label="目录名称" label-width="80px">
          <el-input size="small" style="width: 230px; " placeholder="根据目录名称搜索"></el-input>
        </el-form-item>
        <el-form-item label="状态" style="margin-left: 10px;" label-width="60px">
          <el-select size="small">
            <el-option value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item style="margin-left: 20px;">
          <el-button size="small">清除</el-button>
          <el-button size="small" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 提示 -->
      <el-alert
        title="数据一共 1 条"
        type="info"
        show-icon
        close-text=" ">
      </el-alert>

      <!-- 表格 -->
      <el-table
      style="width: 100%">
      <el-table-column
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        label="所属学科"
        width="180">
      </el-table-column>
      <el-table-column
        label="目录名称">
      </el-table-column>
      <el-table-column
        label="创建者">
      </el-table-column>
      <el-table-column
        label="创建日期">
      </el-table-column>
      <el-table-column
        label="面试题数量">
      </el-table-column>
      <el-table-column
        label="状态">
      </el-table-column>
      <el-table-column
        label="操作">
        <!-- 编辑 -->
        <i class="el-icon-edit"></i>
      </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="self-table-pagination">
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="prev, pager, next, sizes, jumper"
      :total="400">
    </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang='less'>
.container {
  padding: 10px 10px;
}
.self-table-pagination {
    margin-top: 20px;
    margin-left: 1060px;
}
.form-box {
  display: flex;

}
</style>
